import React,{useState} from 'react'
import '../../../assets/styles/mineSetup.less'
import MineInfo from './component/MineInfo'
import MineUpdata from './component/MineUpdata'

export default function MineSetup() {
  const [menuList, setMenuList] = useState([
    { name: '基本资料', id: 1, state: 'set_active' },
    { name: '账号安全', id: 2, state: '' },
  ])
  //切换访问页面
  let [page, setPage] = useState('基本资料')
  function changeState(name) {
    // console.log(name);
    page = name
    setPage(page)
    //先清除所有的样式
    menuList.forEach(item => item.state = '')
    //点击的按钮添加样式
    for (const ele of menuList) {
      if (ele.name == name) {
        ele.state = 'set_active'
        break;
      }
    }
    setMenuList([...menuList])
  }
  return (
    <div className='setupBox'>
      <div className='setupContent'>
        <div className='left_Box'>
          {menuList.map(item=>{
            return <div onClick={()=>changeState(item.name)} key={item.id} className={'leftItem'+' '+item.state}>{item.name}</div>
          })}
        </div>
        <div className='right_Box'>
          {page=='基本资料'&&<MineInfo/>}
          {page=='账号安全'&&<MineUpdata/>}
        </div>
      </div>
    </div>
  )
}
